<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>工作经验与薪资关系图&学历与薪资关系图</title>
    <script src="../static/js/echarts.min.js"></script>
    <script src="../static/theme/dark.js"></script>
    <script src="../static/theme/my_theme.js"></script>
    <script src="../static/theme/vintage.js"></script>
    <style>
        .chart-group{
            width: 100%;
            padding: 50px;
            display: flex;
            justify-content: space-between;
            margin: auto;
            box-sizing: border-box;
        }
        .chart1{
            width: 700px;
            height: 450px;
        }
        .chart2{
            width: 700px;
            height: 450px;
        }
    </style>
</head>
<body>
<div class="chart-group">
    <div class="chart1"></div>
    <div class="chart2"></div>
</div>
<script>
    // 初始化echarts
    var myCharts1 =  echarts.init(document.querySelector('.chart1'),'vintage')
    var myCharts2 =  echarts.init(document.querySelector('.chart2'),'vintage')
    // 获取视图函数传入数据并转换成json格式
    var exp_date = {{ exp_date|tojson }}
    var exp_sal = {{ exp_sal|tojson }}
    var edu_level = {{ edu_level|tojson }}
    var edu_sal = {{ edu_sal|tojson }}
    function getOption(category,data,desc){
        var option = {
        title:{
          text : desc,
          textStyle:{
              fontFamily:'楷体',
              fontSize:21
          }
        },
        xAxis:{
            type:'category',
            data:category,
            axisLabel:{
                interval:0,
                rotate:40,
                margin:10
            }
        },
        yAxis:{
            type:'value',
            scale:true
        },
        legend:{
          name:['工资水平']
        },
        tooltip:{
            trigger:'axis',
            triggerOn:'mousemove',
            formatter: function (rst){
                if(desc=="工作经验与薪资关系图"){
                    return '工作经验：'+rst[0].name+'<br>'+'每月薪资：'+rst[0].value+'k/月'
                }else{
                    return '学历：'+rst[0].name+'<br>'+'每月薪资：'+rst[0].value+'k/月'
                }
            }
        },
        series:[
            {
                name:'工资水平',
                type:'line',
                data:data,
                label:{
                    show:true
                },
                smooth:true,
                markPoint:{
                    data:[
                        {
                            name:'最大值',
                            type:"max",
                            symbolSize:[40,40],//容器大小
                            symbolOffset:[0,-20],//位置偏移,
                            label:{
                                show:true,
                                formatter:function (rst){
                                    return rst.name
                                }
                            }
                        },
                        {
                            name:'最小值',
                            type:'min',
                            symbolSize:[40,40],//容器大小
                            symbolOffset:[0,-20],//位置偏移
                            label:{
                                show:true,
                                formatter:function (rst){
                                    return rst.name
                                }
                            }
                        }
                    ]
                },
                markLine:{
                    data:[
                        {
                            name:'平均值',
                            type:'average',
                            label:{
                                formatter:function (rst)
                                {
                                    return rst.name+":\n"+rst.value
                                }
                            }
                        }
                    ]
                }
            }
        ]
    }
        return option
    }
    var option1 = getOption(exp_date,exp_sal,'工作经验与薪资关系')
    var option2 = getOption(edu_level,edu_sal,'学历与薪资关系')
    myCharts1.setOption(option1)
    myCharts2.setOption(option2)
</script>
</body>
</html>